<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.7.16/dist/vue.js"></script>
</head>

<!-- 
通过Vue实例都可以访问哪些属性？（通过vm都可以vm.什么）
Vue实例中的属性很多，有的以$开头，有的以_开头，这些属性都是提供程序员使用的
所有以_开始的属性，可以看做是私有的属性，这些属性是Vue框架底层使用的，一般我们程序员很少使用
所有以$开头的属性，可以看做是Vue框架提供的一些公共属性，程序员可以直接使用这些属性
通过vm也可以访问Vue实例对象的的原型对象的属性，例如vm.$delete

-->
<body>
    <div class="app">
        <h1>{{msg}}</h1>
    </div>

<script>

    let dataobj={
        msg:"helloooo"
    }
    const vm = new Vue({
      el: '.app',
      data:dataobj,
      })
      /* 
      按理说msg是dataobj对象的属性，为什么msg属性可以通过vm来访问？
      这是因为Vue框架底层使用了数据代理机制
      要想搞明白数据代理机制，必须有一个基础知识点：Object.defineProperty()
      
      */
</script>

</body>
</html>